<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="navList">
			<view :class="navId == item.id?'active':''"  class="nav" v-for="(item,index) in navList" :key="index" @tap="changeNav(item)">
			  {{item.title}}
				<image src="../../static/mine/top.png" class="topImg" v-if="navId == item.id"></image>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="shopping">
				<view class="status">{{item.state == 1?'收益中':item.state == 2?'出售中':'已出售'}}</view>
				<image :src="item.imageUrl" class="shoppingImg"></image>
			    <view class="shoppingInfo">
					<view class="title">{{item.goodsName}}</view>
					<view class="price">实付款：<span>¥{{item.price}}</span></view>
				</view>
			</view>
			<view class="time">下单时间：{{item.createTime}}</view>
			<view class="submit" v-if="item.state == 1" @tap="confirmReceive(item)">上架寄售</view>
		</view>
		<view class="noneContent" v-if="list.length == 0">
			<image src="@/static/withdraw/noneCard.png" class="noneImg"></image>
			<view class="tips">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import { myGoods,confirmReceive,sellGoods } from "../../api/api.js"
	export default {
		data() {
			return {
				navId:1,
				navList:[
					{id:1,title:'全部'},
					{id:2,title:'收益中'},
					{id:3,title:'出售中'},
					{id:4,title:'已出售'},
					{id:5,title:'已提货'},
				],
				list:[],
				pageNum:1,
				pageSize:20,
				pages:'',
			}
		},
		onShow() {
			this.pageNum = 1
			this.list = []
			// 获取商品列表
			this.getList()
		},
		onReachBottom() {
			if(this.pages <= this.pageNum) {
				uni.showToast({
					icon:'none',
					title:'暂无更多~'
				})
				return
			}else {
				this.pageNum ++
				// 获取商品列表
				this.getList()
			}
		},
		methods: {
			changeNav(item) {
				this.navId = item.id
				this.pageNum = 1
				this.list = []
				// 获取商品列表
				this.getList()
			},
			// 获取商品列表
			getList() {
				let data = {
					pageNum:this.pageNum,
					pageSize:this.pageSize,
					state:this.navId==1?null:this.navId - 1
				}
				myGoods(data).then( res=> {
					this.list = this.list.concat(res.data.records)
					this.pages = res.data.pages
				})
			},
			// 上架拍卖
			confirmReceive(item) {
				var that = this
				let data = {
					id:item.id
				}
				sellGoods(data).then( res=> {
					if( res.code == 200 ){
						uni.showToast({
							title:'操作成功',
							icon:'none'
						})
						setTimeout(function() {
							that.pageNum = 1
							that.list = []
							// 获取商品列表
							that.getList()
						},500)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
  .content {
		// 导航栏
		.navList {
			padding: 33rpx 0;
			display: flex;
			align-items: center;
			width: 100%;
			background-color: #FE3B33;
			.nav {
				position: relative;
				text-align: center;
				width: 25%;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.9);
				line-height: 40rpx;
				.topImg {
					width: 50rpx;
					height: 27rpx;
					position: absolute;
					left: 50% - 12rpx;
					bottom: -35rpx;
				}
			}
			.active {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		// 商品列表
		.list {
			position: relative;
			padding: 43rpx 0 24rpx 0;
			width: 100%;
			border-bottom: 1rpx solid #EEEEEE;
			.shopping {
				display: flex;
				.status {
					position: absolute;
					top: 38rpx;
					right: 30rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE3B33;
					line-height: 42rpx;
				}
				.shoppingImg {
					margin-left: 30rpx;
					width: 180rpx;
					height: 180rpx;
					border-radius: 15rpx;
				}
				.shoppingInfo {
					margin-left: 20rpx;
					.title {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1A1A1A;
						line-height: 42rpx;
					}
					.price {
						margin-top: 86rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1A1A1A;
						line-height: 37rpx;
						span {
							font-size: 36rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1A1A1A;
							line-height: 50rpx;
						}
					}
				}
			}
			.time {
				margin: 20rpx 0 0 30rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;
				line-height: 37rpx;
			}
			.submit {
				position: absolute;
				right: 30rpx;
				bottom: 24rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FE3B33;
				line-height: 62rpx;
				width: 162rpx;
				height: 62rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				border: 1rpx solid #FE3B33;
			}
		}
		.noneContent {
			display: flex;
			align-items: center;
			flex-direction: column;
			.noneImg {
				margin-top: 132rpx;
				width: 320rpx;
				height: 291rpx;
			}
			.tips {
				margin-top: 36rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B8B8B8;
				line-height: 33rpx;
			}
		}
	}
</style>
